import { View, Text } from '@tarojs/components'
import Taro, {Component} from '@tarojs/taro'
import styles from './index.module.scss'
import { AtAccordion, AtButton  } from 'taro-ui'
import { getCertificateList } from '@/api'
import { dialog } from '@/util'
import { connect } from '@tarojs/redux'
import { setUrl } from '@/actions/web'

@connect(({user}) => ({
  info: user.info
}), dispatch => ({
  setUrl: (data) => dispatch(setUrl(data))
}))
export default class Certificate extends Component {

  config = {
    navigationBarTitleText: '个人证书'
  }

  state = {
    open: true,
    list: []
  }

  componentWillMount = () => {
    this.getList()
  }

  getList = async () => {
    const {info} = this.props
    try {
      const { data } = await getCertificateList({userName: info.name || '', phone: info.mobile})
      let arr = data.map((item) => {
        return {
          ...item,
          open: true
        }
      })
      this.setState({list: arr})
    } catch (e) {
      dialog.toast({title: e.message})
    }
  }

  handlerClick = (open, index) => {
    this.setState(pre => {
      pre.list[index].open = open
      return {list: pre.list}
    })
  }

  handleCheck = async (url) => {
    const { setUrl } = this.props
    let reg = /\.(png|jpg|gif|jpeg|webp)$/
    if (reg.test(url)) {
      url = url.replace(/^(https?)/, 'https')
      setUrl(url)
      Taro.navigateTo({url: '/pages/web/index?title=个人证书'})
      return
    }
    Taro.showLoading({title: '证书加载中...'})
    Taro.request({
      url,
      success: ({statusCode, data}) => {
        if (statusCode === 200) {
          setUrl(data.url)
          Taro.navigateTo({url: '/pages/web/index?title=个人证书'})
        }
      },
      complete: () => {
        Taro.hideLoading()
      }
    })
  }

  render() {
    const { open, list } = this.state
    return (
      <View className={styles.wrapper}>
        <View className={styles.bannerWrapper}>
          <View className={styles.title}>什么是个人证书</View>
          <View className={styles.content}>
            <View className={styles.line}>1.个人证书是一种平台您的工作技能的认可；</View>
            <View className={styles.line}>2.平台发布的任务中，有的任务会有对相应个人证书的要求才能接单；</View>
          </View>
        </View>
        <View className={styles.accordionWrapper}>
          {
            list.length && list.map((item, index) => {
              return (
                <View className={styles.accordion} key={index + ''}>
                  <AtAccordion
                    open={item.open}
                    onClick={(open) => this.handlerClick(open, index)}
                    title={item.lessonName}
                  >
                    {item.lessonCode && <View className={styles.flex}>
                      <View className={styles.label}>证书编号：</View>
                      <View className={styles.value}>{item.lessonCode}</View>
                    </View>}
                    <View className={styles.flex}>
                      <View className={styles.label}>学习时间：</View>
                      <View className={styles.value}>{item.learnDate}</View>
                    </View>
                    <View className={styles.flex}>
                      <View className={styles.label}>获得方式：</View>
                      <View className={styles.value}>平台学习</View>
                    </View>
                    <View className={styles.flex}>
                      <View className={styles.label}>证书详情：</View>
                      <View className={styles.value}>
                        {
                          item.certUrl ? <Text className={styles.link} onClick={() => this.handleCheck(item.certUrl)}>查看电子证书</Text> : '未获得证书'
                        }
                      </View>
                    </View>
                  </AtAccordion>
                </View>
              )
            })
          }
        </View>
        <AtButton type="primary" size="normal" className={styles.btnUpload} onClick={() => Taro.navigateTo({url: '/pages/certificateUpload/index'})}>人工上传证书</AtButton>
      </View>
    )
  }

}
